<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				text-align: center;
			}
			#box1{
				width:100px;
				height: 100px;
				border: 1px solid lightgray;
				position: absolute;
				background-color: skyblue;
				box-sizing: border-box;
			}
			[type=button]{
				position: absolute;
				top: 400px;
				padding: 5px 10px;
			}
		</style>
	</head>
	<body>
		<!-- <button type="button" id="btn1">显示</button>
		<button type="button" id="btn2">隐藏</button>
		<button type="button" id="btn3">显示/隐藏</button> -->
		<button type="button" id="btn4">旋转吧，小方块</button>
		<div id="box1"></div>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				// $("#btn1").on("click",function(){
				// 	$("#box1").stop().fadeIn(1000);
				// });
				// $("#btn2").on("click",function(){
				// 	$("#box1").stop().fadeOut(1000);
				// });
				// $("#btn3").on("click",function(){
				// 	$("#box1").stop().fadeToggle(1000);
				// });
				$("#btn4").on("click",function(){
					var w = $(window).width()-100;
					var h = $(window).height()-100;
					console.log(w,h);
					for (var i = 0; i < 10; i++) {
						// $("#box1").animate({
						// 	"left":"+=1920px",
						// 	// "top":"+=920px"
						// },500,function(){
						// 	$("#box1").animate({
						// 		// "left":"+=1850px",
						// 		"top":"+=980px"
						// 	},500,function(){
						// 		$("#box1").animate({
						// 			"left":"-=1920px",
						// 			// "top":"-=920px"
						// 		},500,function(){
						// 			$("#box1").animate({
						// 				// "left":"-=1850px",
						// 				"top":"-=980px"
						// 			},500);
						// 		});
						// 	});
						// });
						$("#box1").animate({
							"left":"+="+w+"px"
						},400);
						$("#box1").animate({
							"top":"+="+h+"px"
						},400);
						$("#box1").animate({
							"left":"-="+w+"px"
						},400);
						$("#box1").animate({
							"top":"-="+h+"px"
						},400);
					};
				});
			});
		</script>
	</body>
</html>
